import Vue from 'vue'
import VueRouter from 'vue-router'
import Main from '../views/Main.vue'
import CategoriesEdit from '../views/Categories/CategoriesEdit.vue'
import CategoriesList from '../views/Categories/CategoriesList.vue'
import ItemsEdit from '../views/Items/ItemsEdit.vue'
import ItemsList from '../views/Items/ItemsList.vue'
import HeroesEdit from '../views/Heroes/HeroesEdit.vue'
import HeroesList from '../views/Heroes/HeroesList.vue'
import ArticlesEdit from '../views/Articles/ArticlesEdit.vue'
import ArticlesList from '../views/Articles/ArticlesList.vue'
import AdsEdit from '../views/Ads/AdsEdit.vue'
import AdsList from '../views/Ads/AdsList.vue'
import AdminsEdit from '../views/Admins/AdminsEdit.vue'
import AdminsList from '../views/Admins/AdminsList.vue'
import Login from '../views/Login.vue'
import Hello from '../views/Hello.vue'
import Redirect from '../views/Redirect.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/login', name: 'login', component: Login, meta: { isPublic: true } },
  { path: '/redirect', component: Redirect},
  {
    path: '/',
    component: Main,
    redirect: '/hello',
    children: [
      { path: '/hello', name: 'hello', component: Hello},
      { path: '/categories/create', component: CategoriesEdit },
      // prop: 把url上的参数注入到页面中 在页面中通过props可以接收使用
      { path: '/categories/edit/:id', component: CategoriesEdit, props: true },
      { path: '/categories/list', component: CategoriesList },

      { path: '/Items/create', component: ItemsEdit },
      { path: '/Items/edit/:id', component: ItemsEdit, props: true },
      { path: '/Items/list', component: ItemsList },

      { path: '/Heroes/create', component: HeroesEdit },
      { path: '/Heroes/edit/:id', component: HeroesEdit, props: true },
      { path: '/Heroes/list', component: HeroesList },

      { path: '/Articles/create', component: ArticlesEdit },
      { path: '/Articles/edit/:id', component: ArticlesEdit, props: true },
      { path: '/Articles/list', component: ArticlesList },

      { path: '/ads/create', component: AdsEdit },
      { path: '/ads/edit/:id', component: AdsEdit, props: true },
      { path: '/ads/list', component: AdsList },

      { path: '/admins/create', component: AdminsEdit },
      { path: '/admins/edit/:id', component: AdminsEdit, props: true },
      { path: '/admins/list', component: AdminsList },
    ]
  },
]

const router = new VueRouter({
  routes
})

// meta的定义：简单来说就是路由元信息，也就是每个路由身上携带的信息。
// meta的作用：vue-router路由元信息说白了就是通过meta对象中的一些属性来判断当前路由是否需要进一步处理，
// 如果需要处理，按照自己想要的效果进行处理即可
router.beforeEach((to, from, next) => {
  if (!to.meta.isPublic && !localStorage.token) {
    return next('/login')
  }
  next()
})

export default router
